<script setup lang="ts">
import { computed} from "vue"
import {RouterLink, RouterView, useRoute} from 'vue-router'
const route = useRoute();
const activeTab = computed(() => route.name);
const routes = [
  {
    path: "/bak/home",
    name: "home"
  },
  {
    path: "/bak/about",
    name: "about"
  },
  {
    path: "/bak/smoothDnd01",
    name: "smoothDnd01"
  },
  {
    path: "/bak/smoothDnd01a",
    name: "smoothDnd01a"
  },
  {
    path: "/bak/smoothDnd01b",
    name: "smoothDnd01b"
  },
  {
    path: "/bak/smoothDnd01c",
    name: "smoothDnd01c"
  },
  {
    path: "/bak/smoothDnd02",
    name: "smoothDnd02"
  },
  {
    path: "/bak/smoothDnd02a",
    name: "smoothDnd02a"
  },
  {
    path: "/bak/smoothDnd02b",
    name: "smoothDnd02b"
  },
  {
    path: "/bak/smoothDnd02c",
    name: "smoothDnd02c"
  },
  {
    path: "/bak/smoothDnd03",
    name: "smoothDnd03"
  },
  {
    path: "/bak/smoothDnd03a",
    name: "smoothDnd03a"
  },
  {
    path: "/bak/smoothDnd03b",
    name: "smoothDnd03b"
  },
  {
    path: "/bak/smoothDnd03c",
    name: "smoothDnd03c"
  },
  {
    path: "/bak/smoothDnd03d",
    name: "smoothDnd03d"
  },
  {
    path: "/bak/sd-demo01",
    name: "sd-demo01"
  },
  {
    path: "/bak/sd-demo02",
    name: "sd-demo02"
  },
  {
    path: "/bak/sd-demo03",
    name: "sd-demo03"
  },
  {
    path: "/bak/dataSourceBak",
    name: "dataSourceBak"
  },
  {
    path: "/bak/actionsBak",
    name: "actionsBak"
  },
  {
    path: "/bak/layoutBak",
    name: "layoutBak"
  }
]
</script>

<template>
  <h2>当前选中路由：{{activeTab}}</h2>
  <div class="tabs">
    <RouterLink v-for="route in routes" v-bind:key="route.name" :to="route.path">
      <div class="tab" :class="{active: activeTab===route.name}">{{route.name}}</div>
    </RouterLink>
  </div>
  <RouterView />
</template>

<style scoped>
.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  flex-wrap: wrap;
}
.tab{
  margin-right:8px;
}
.active{
  background: pink;
}
</style>
